<template>
  <div
    :style="{
      fontSize: detail.style.fontSize + 'px',
      fontFamily: detail.style.fontFamily,
      color: detail.style.fontColor,
      textAlign: textAlign,
      lineHeight: lineHeight + 'px',
    }"
  >
    <explain-line-chart
      v-if="detail.dataBind.showType === 'curve' && explain.explainId"
      :detail="detail"
    />
    <div
      v-else-if="detail.dataBind.showType === 'text'"
    >
      <span>{{ enableEval === '1' ? explain.value : explain.rawValue }}</span>
    </div>
    <div v-else>
      <el-input :value="enableEval === '1' ? explain.value : explain.rawValue">
        <template v-if="detail.dataBind.showType === 'nameWithValueWithUnit'" slot="prepend">{{ explain.name }}</template>
        <template v-if="detail.dataBind.showType === 'valueWithUnit' || detail.dataBind.showType === 'nameWithValueWithUnit'" slot="append">{{ explain.unit }}</template>
      </el-input>
    </div>
  </div>
</template>

<script>
import ExplainLineChart from './components/ExplainLineChart'
import resize from '@/components/Mixins/resize'
import {
  getExplain
} from '@/api/iot/iotDeviceExplainApi'
import {
  getEnableEval
} from '@/util/storage'
import BaseView from '../View'
export default {
  name: 'IotExplain',
  components: {
    ExplainLineChart
  },
  extends: BaseView,
  mixins: [resize],
  props: {

  },
  data() {
    return {
      enableEval: getEnableEval(),
      explain: {}
    }
  },
  watch: {
    detail: function(newVal) {
      this.getExplain()
    }
  },
  created() {
    this.getExplain()
  }, methods: {
    getExplain() {
      const that = this
      getExplain({
        deviceCore: this.detail.dataBind.deviceCore,
        keyName: this.detail.dataBind.keyName,
        port: this.detail.dataBind.port
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.explain = data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import '@/styles/element-variables.scss';

  .primary-color {
    color: $--color-primary;
  }

  .item {
    margin-top: 5px;
    padding: 10px;
  }

</style>
